रिएक्ट रेंडर: कॉम्पोनेन्ट रेंडरिंग और लाइफसाइकल प्रबंधन

रिएक्ट, यूजर इंटरफेस बनाने के लिए एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी, कॉम्पोनेन्ट को प्रदर्शित करने और अपडेट करने के लिए एक कुशल रेंडरिंग प्रक्रिया पर निर्भर करती है। यह समझना कि रिएक्ट कॉम्पोनेन्ट को कैसे रेंडर करता है, उनके लाइफसाइकल का प्रबंधन करता है, और प्रदर्शन को कैसे अनुकूलित करता है, मजबूत और स्केलेबल एप्लिकेशन बनाने के लिए महत्वपूर्ण है। यह व्यापक गाइड इन अवधारणाओं को विस्तार से बताता है, दुनिया भर के डेवलपर्स के लिए व्यावहारिक उदाहरण और सर्वोत्तम प्रथाओं को प्रदान करता है।

रिएक्ट रेंडरिंग प्रक्रिया को समझना

रिएक्ट के संचालन का मूल इसके कॉम्पोनेन्ट-आधारित आर्किटेक्चर और वर्चुअल DOM में निहित है। जब किसी कॉम्पोनेन्ट की स्टेट या प्रॉप्स बदलते हैं, तो रिएक्ट सीधे वास्तविक DOM में हेरफेर नहीं करता है। इसके बजाय, यह DOM का एक वर्चुअल प्रतिनिधित्व बनाता है, जिसे वर्चुअल DOM कहा जाता है। फिर, रिएक्ट वर्चुअल DOM की तुलना पिछले संस्करण से करता है और वास्तविक DOM को अपडेट करने के लिए आवश्यक परिवर्तनों के न्यूनतम सेट की पहचान करता है। यह प्रक्रिया, जिसे रिकॉन्सिलेशन (reconciliation) के रूप में जाना जाता है, प्रदर्शन में काफी सुधार करती है।

वर्चुअल DOM और रिकॉन्सिलेशन

वर्चुअल DOM वास्तविक DOM का एक हल्का, इन-मेमोरी प्रतिनिधित्व है। इसे वास्तविक DOM की तुलना में हेरफेर करना बहुत तेज और अधिक कुशल है। जब कोई कॉम्पोनेन्ट अपडेट होता है, तो रिएक्ट एक नया वर्चुअल DOM ट्री बनाता है और इसकी तुलना पिछले ट्री से करता है। यह तुलना रिएक्ट को यह निर्धारित करने की अनुमति देती है कि वास्तविक DOM में किन विशिष्ट नोड्स को अपडेट करने की आवश्यकता है। रिएक्ट फिर इन न्यूनतम अपडेट को वास्तविक DOM पर लागू करता है, जिसके परिणामस्वरूप एक तेज और अधिक प्रदर्शनकारी रेंडरिंग प्रक्रिया होती है।

इस सरल उदाहरण पर विचार करें:

परिदृश्य: एक बटन क्लिक स्क्रीन पर प्रदर्शित एक काउंटर को अपडेट करता है।

रिएक्ट के बिना: प्रत्येक क्लिक एक पूर्ण DOM अपडेट को ट्रिगर कर सकता है, जिससे पूरा पेज या उसके बड़े हिस्से फिर से रेंडर हो सकते हैं, जिससे प्रदर्शन धीमा हो सकता है।

रिएक्ट के साथ: केवल वर्चुअल DOM के भीतर काउंटर मान अपडेट होता है। रिकॉन्सिलेशन प्रक्रिया इस परिवर्तन की पहचान करती है और इसे वास्तविक DOM में संबंधित नोड पर लागू करती है। बाकी पेज अपरिवर्तित रहता है, जिसके परिणामस्वरूप एक सहज और प्रतिक्रियाशील उपयोगकर्ता अनुभव होता है।

रिएक्ट बदलावों का निर्धारण कैसे करता है: डिफिंग एल्गोरिदम

रिएक्ट का डिफिंग एल्गोरिदम रिकॉन्सिलेशन प्रक्रिया का दिल है। यह नए और पुराने वर्चुअल DOM ट्री की तुलना करके अंतरों की पहचान करता है। एल्गोरिदम तुलना को अनुकूलित करने के लिए कई धारणाएँ बनाता है:

• विभिन्न प्रकार के दो तत्व अलग-अलग ट्री उत्पन्न करेंगे। यदि रूट एलिमेंट्स के प्रकार भिन्न हैं (उदाहरण के लिए, एक <div> को <span> में बदलना), तो रिएक्ट पुराने ट्री को अनमाउंट कर देगा और नए ट्री को स्क्रैच से बनाएगा।
• एक ही प्रकार के दो एलिमेंट्स की तुलना करते समय, रिएक्ट यह निर्धारित करने के लिए उनके एट्रिब्यूट्स को देखता है कि क्या कोई परिवर्तन हुआ है। यदि केवल एट्रिब्यूट्स बदले हैं, तो रिएक्ट मौजूदा DOM नोड के एट्रिब्यूट्स को अपडेट कर देगा।
• रिएक्ट सूची आइटम्स को विशिष्ट रूप से पहचानने के लिए एक 'key' प्रॉप का उपयोग करता है। एक 'key' प्रॉप प्रदान करने से रिएक्ट पूरी सूची को फिर से रेंडर किए बिना सूचियों को कुशलतापूर्वक अपडेट कर सकता है।

इन धारणाओं को समझने से डेवलपर्स को अधिक कुशल रिएक्ट कॉम्पोनेन्ट लिखने में मदद मिलती है। उदाहरण के लिए, सूचियों को रेंडर करते समय कीज़ (keys) का उपयोग करना प्रदर्शन के लिए महत्वपूर्ण है।

रिएक्ट कॉम्पोनेन्ट लाइफसाइकल

रिएक्ट कॉम्पोनेन्ट का एक अच्छी तरह से परिभाषित लाइफसाइकल होता है, जिसमें मेथड्स की एक श्रृंखला होती है जो एक कॉम्पोनेन्ट के अस्तित्व में विशिष्ट बिंदुओं पर कॉल की जाती हैं। इन लाइफसाइकल मेथड्स को समझने से डेवलपर्स को यह नियंत्रित करने की अनुमति मिलती है कि कॉम्पोनेन्ट कैसे रेंडर, अपडेट और अनमाउंट होते हैं। हुक्स की शुरुआत के साथ, लाइफसाइकल मेथड्स अभी भी प्रासंगिक हैं, और उनके अंतर्निहित सिद्धांतों को समझना फायदेमंद है।

क्लास कॉम्पोनेन्ट में लाइफसाइकल मेथड्स

क्लास-आधारित कॉम्पोनेन्ट में, लाइफसाइकल मेथड्स का उपयोग कॉम्पोनेन्ट के जीवन के विभिन्न चरणों में कोड निष्पादित करने के लिए किया जाता है। यहाँ प्रमुख लाइफसाइकल मेथड्स का एक सिंहावलोकन है:

• constructor(props): कॉम्पोनेन्ट माउंट होने से पहले कॉल किया जाता है। इसका उपयोग स्टेट को इनिशियलाइज़ करने और इवेंट हैंडलर्स को बाइंड करने के लिए किया जाता है।
• static getDerivedStateFromProps(props, state): रेंडरिंग से पहले, प्रारंभिक माउंट और बाद के अपडेट दोनों पर कॉल किया जाता है। इसे स्टेट को अपडेट करने के लिए एक ऑब्जेक्ट लौटाना चाहिए, या null यह इंगित करने के लिए कि नए प्रॉप्स को किसी भी स्टेट अपडेट की आवश्यकता नहीं है। यह मेथड प्रॉप परिवर्तनों के आधार पर अनुमानित स्टेट अपडेट को बढ़ावा देती है।
• render(): आवश्यक मेथड जो रेंडर करने के लिए JSX लौटाता है। यह प्रॉप्स और स्टेट का एक शुद्ध फ़ंक्शन होना चाहिए।
• componentDidMount(): कॉम्पोनेन्ट के माउंट होने (ट्री में डाले जाने) के तुरंत बाद कॉल किया जाता है। यह साइड इफेक्ट्स करने के लिए एक अच्छी जगह है, जैसे कि डेटा लाना या सब्सक्रिप्शन सेट करना।
• shouldComponentUpdate(nextProps, nextState): नए प्रॉप्स या स्टेट प्राप्त होने पर रेंडरिंग से पहले कॉल किया जाता है। यह आपको अनावश्यक री-रेंडर्स को रोककर प्रदर्शन को अनुकूलित करने की अनुमति देता है। यदि कॉम्पोनेन्ट को अपडेट करना चाहिए तो true लौटाना चाहिए, या यदि नहीं करना चाहिए तो false।
• getSnapshotBeforeUpdate(prevProps, prevState): DOM अपडेट होने से ठीक पहले कॉल किया जाता है। DOM से जानकारी (जैसे, स्क्रॉल स्थिति) को बदलने से पहले कैप्चर करने के लिए उपयोगी है। रिटर्न मान componentDidUpdate() को एक पैरामीटर के रूप में पास किया जाएगा।
• componentDidUpdate(prevProps, prevState, snapshot): अपडेट होने के तुरंत बाद कॉल किया जाता है। यह एक कॉम्पोनेन्ट के अपडेट होने के बाद DOM संचालन करने के लिए एक अच्छी जगह है।
• componentWillUnmount(): कॉम्पोनेन्ट के अनमाउंट और नष्ट होने से ठीक पहले कॉल किया जाता है। यह संसाधनों को साफ करने के लिए एक अच्छी जगह है, जैसे कि इवेंट श्रोताओं को हटाना या नेटवर्क अनुरोधों को रद्द करना।
• static getDerivedStateFromError(error): रेंडरिंग के दौरान एक त्रुटि के बाद कॉल किया जाता है। यह त्रुटि को एक तर्क के रूप में प्राप्त करता है और स्टेट को अपडेट करने के लिए एक मान लौटाना चाहिए। यह कॉम्पोनेन्ट को एक फॉलबैक UI प्रदर्शित करने की अनुमति देता है।
• componentDidCatch(error, info): एक डिसेंडेंट कॉम्पोनेन्ट में रेंडरिंग के दौरान एक त्रुटि के बाद कॉल किया जाता है। यह त्रुटि और कॉम्पोनेन्ट स्टैक जानकारी को तर्कों के रूप में प्राप्त करता है। यह एक त्रुटि रिपोर्टिंग सेवा में त्रुटियों को लॉग करने के लिए एक अच्छी जगह है।

लाइफसाइकल मेथड्स का एक क्रियाशील उदाहरण

एक ऐसे कॉम्पोनेन्ट पर विचार करें जो माउंट होने पर एपीआई से डेटा लाता है और जब उसके प्रॉप्स बदलते हैं तो डेटा को अपडेट करता है:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>Loading...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

इस उदाहरण में:

• componentDidMount() जब कॉम्पोनेन्ट पहली बार माउंट होता है तो डेटा लाता है।
• componentDidUpdate() यदि url प्रॉप बदलता है तो फिर से डेटा लाता है।
• render() मेथड डेटा लाए जाने के दौरान एक लोडिंग संदेश प्रदर्शित करता है और फिर डेटा उपलब्ध होने पर उसे रेंडर करता है।

लाइफसाइकल मेथड्स और एरर हैंडलिंग

रिएक्ट रेंडरिंग के दौरान होने वाली त्रुटियों को संभालने के लिए लाइफसाइकल मेथड्स भी प्रदान करता है:

• static getDerivedStateFromError(error): रेंडरिंग के दौरान एक त्रुटि होने के बाद कॉल किया जाता है। यह त्रुटि को एक तर्क के रूप में प्राप्त करता है और स्टेट को अपडेट करने के लिए एक मान लौटाना चाहिए। यह कॉम्पोनेन्ट को एक फॉलबैक UI प्रदर्शित करने की अनुमति देता है।
• componentDidCatch(error, info): एक डिसेंडेंट कॉम्पोनेन्ट में रेंडरिंग के दौरान एक त्रुटि होने के बाद कॉल किया जाता है। यह त्रुटि और कॉम्पोनेन्ट स्टैक जानकारी को तर्कों के रूप में प्राप्त करता है। यह एक त्रुटि रिपोर्टिंग सेवा में त्रुटियों को लॉग करने के लिए एक अच्छी जगह है।

ये मेथड्स आपको त्रुटियों को शालीनता से संभालने और आपके एप्लिकेशन को क्रैश होने से बचाने की अनुमति देते हैं। उदाहरण के लिए, आप उपयोगकर्ता को एक त्रुटि संदेश प्रदर्शित करने के लिए getDerivedStateFromError() और सर्वर पर त्रुटि लॉग करने के लिए componentDidCatch() का उपयोग कर सकते हैं।

हुक्स और फंक्शनल कॉम्पोनेन्ट्स

रिएक्ट 16.8 में पेश किए गए रिएक्ट हुक्स, फंक्शनल कॉम्पोनेन्ट में स्टेट और अन्य रिएक्ट सुविधाओं का उपयोग करने का एक तरीका प्रदान करते हैं। जबकि फंक्शनल कॉम्पोनेन्ट में क्लास कॉम्पोनेन्ट की तरह लाइफसाइकल मेथड्स नहीं होते हैं, हुक्स समकक्ष कार्यक्षमता प्रदान करते हैं।

• useState(): आपको फंक्शनल कॉम्पोनेन्ट में स्टेट जोड़ने की अनुमति देता है।
• useEffect(): आपको फंक्शनल कॉम्पोनेन्ट में साइड इफेक्ट्स करने की अनुमति देता है, जो componentDidMount(), componentDidUpdate(), और componentWillUnmount() के समान है।
• useContext(): आपको रिएक्ट कॉन्टेक्स्ट तक पहुंचने की अनुमति देता है।
• useReducer(): आपको एक रिड्यूसर फ़ंक्शन का उपयोग करके जटिल स्टेट का प्रबंधन करने की अनुमति देता है।
• useCallback(): एक फ़ंक्शन का मेमोइज़्ड संस्करण लौटाता है जो केवल तभी बदलता है जब किसी एक निर्भरता में परिवर्तन हुआ हो।
• useMemo(): एक मेमोइज़्ड मान लौटाता है जो केवल तभी पुनर्गणना करता है जब किसी एक निर्भरता में परिवर्तन हुआ हो।
• useRef(): आपको रेंडर्स के बीच मानों को बनाए रखने की अनुमति देता है।
• useImperativeHandle(): ref का उपयोग करते समय पैरेंट कॉम्पोनेन्ट के लिए उजागर किए गए इंस्टेंस मान को अनुकूलित करता है।
• useLayoutEffect(): useEffect का एक संस्करण जो सभी DOM म्यूटेशन के बाद सिंक्रोनस रूप से फायर होता है।
• useDebugValue(): रिएक्ट DevTools में कस्टम हुक के लिए एक मान प्रदर्शित करने के लिए उपयोग किया जाता है।

useEffect हुक का उदाहरण

यहां बताया गया है कि आप एक फंक्शनल कॉम्पोनेन्ट में डेटा लाने के लिए useEffect() हुक का उपयोग कैसे कर सकते हैं:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, [url]); // Only re-run the effect if the URL changes

  if (!data) {
    return <p>Loading...</p>;
  }

  return <div>{data.message}</div>;
}

इस उदाहरण में:

• useEffect() जब कॉम्पोनेन्ट पहली बार रेंडर होता है और जब भी url प्रॉप बदलता है तो डेटा लाता है।
• useEffect() का दूसरा तर्क निर्भरताओं की एक सरणी है। यदि किसी भी निर्भरता में परिवर्तन होता है, तो प्रभाव फिर से चलाया जाएगा।
• useState() हुक का उपयोग कॉम्पोनेन्ट की स्टेट को प्रबंधित करने के लिए किया जाता है।

रिएक्ट रेंडरिंग परफॉर्मेंस को ऑप्टिमाइज़ करना

प्रदर्शनकारी रिएक्ट एप्लिकेशन बनाने के लिए कुशल रेंडरिंग महत्वपूर्ण है। यहां रेंडरिंग प्रदर्शन को अनुकूलित करने के लिए कुछ तकनीकें दी गई हैं:

1. अनावश्यक री-रेंडर्स को रोकना

रेंडरिंग प्रदर्शन को अनुकूलित करने के सबसे प्रभावी तरीकों में से एक अनावश्यक री-रेंडर्स को रोकना है। यहां री-रेंडर्स को रोकने के लिए कुछ तकनीकें दी गई हैं:

• React.memo() का उपयोग करना: React.memo() एक हायर-ऑर्डर कॉम्पोनेन्ट है जो एक फंक्शनल कॉम्पोनेन्ट को मेमोइज़ करता है। यह केवल तभी कॉम्पोनेन्ट को फिर से रेंडर करता है जब उसके प्रॉप्स बदल गए हों।
• shouldComponentUpdate() को लागू करना: क्लास कॉम्पोनेन्ट में, आप प्रॉप या स्टेट परिवर्तनों के आधार पर री-रेंडर्स को रोकने के लिए shouldComponentUpdate() लाइफसाइकल मेथड को लागू कर सकते हैं।
• useMemo() और useCallback() का उपयोग करना: इन हुक्स का उपयोग मानों और फ़ंक्शंस को मेमोइज़ करने के लिए किया जा सकता है, जिससे अनावश्यक री-रेंडर्स को रोका जा सकता है।
• इम्यूटेबल डेटा संरचनाओं का उपयोग करना: इम्यूटेबल डेटा संरचनाएं यह सुनिश्चित करती हैं कि डेटा में परिवर्तन मौजूदा वस्तुओं को संशोधित करने के बजाय नई वस्तुएं बनाते हैं। इससे परिवर्तनों का पता लगाना और अनावश्यक री-रेंडर्स को रोकना आसान हो जाता है।

2. कोड-स्प्लिटिंग

कोड-स्प्लिटिंग आपके एप्लिकेशन को छोटे-छोटे हिस्सों में विभाजित करने की प्रक्रिया है जिन्हें मांग पर लोड किया जा सकता है। यह आपके एप्लिकेशन के प्रारंभिक लोड समय को काफी कम कर सकता है।

रिएक्ट कोड-स्प्लिटिंग को लागू करने के कई तरीके प्रदान करता है:

• React.lazy() और Suspense का उपयोग करना: ये सुविधाएँ आपको कॉम्पोनेन्ट को गतिशील रूप से आयात करने की अनुमति देती हैं, उन्हें केवल तभी लोड करती हैं जब उनकी आवश्यकता होती है।
• डायनामिक आयात का उपयोग करना: आप मांग पर मॉड्यूल लोड करने के लिए डायनामिक आयात का उपयोग कर सकते हैं।

3. लिस्ट वर्चुअलाइजेशन

बड़ी सूचियों को रेंडर करते समय, सभी आइटम्स को एक साथ रेंडर करना धीमा हो सकता है। लिस्ट वर्चुअलाइजेशन तकनीकें आपको केवल उन आइटम्स को रेंडर करने की अनुमति देती हैं जो वर्तमान में स्क्रीन पर दिखाई दे रहे हैं। जैसे ही उपयोगकर्ता स्क्रॉल करता है, नए आइटम्स रेंडर होते हैं और पुराने आइटम्स अनमाउंट हो जाते हैं।

कई लाइब्रेरी हैं जो लिस्ट वर्चुअलाइजेशन कॉम्पोनेन्ट प्रदान करती हैं, जैसे:

• react-window
• react-virtualized

4. इमेजेज को ऑप्टिमाइज़ करना

इमेजेज अक्सर प्रदर्शन संबंधी समस्याओं का एक महत्वपूर्ण स्रोत हो सकती हैं। यहां इमेजेज को अनुकूलित करने के लिए कुछ सुझाव दिए गए हैं:

• अनुकूलित इमेज प्रारूपों का उपयोग करें: बेहतर संपीड़न और गुणवत्ता के लिए WebP जैसे प्रारूपों का उपयोग करें।
• इमेजेज का आकार बदलें: इमेजेज को उनके प्रदर्शन आकार के लिए उपयुक्त आयामों में बदलें।
• लेज़ी लोड इमेजेज: इमेजेज को केवल तभी लोड करें जब वे स्क्रीन पर दिखाई दे रही हों।
• एक CDN का उपयोग करें: अपने उपयोगकर्ताओं के भौगोलिक रूप से करीब सर्वर से इमेजेज परोसने के लिए एक कंटेंट डिलीवरी नेटवर्क (CDN) का उपयोग करें।

5. प्रोफाइलिंग और डीबगिंग

रिएक्ट रेंडरिंग प्रदर्शन की प्रोफाइलिंग और डीबगिंग के लिए उपकरण प्रदान करता है। रिएक्ट प्रोफाइलर आपको रेंडरिंग प्रदर्शन को रिकॉर्ड और विश्लेषण करने की अनुमति देता है, उन कॉम्पोनेन्ट की पहचान करता है जो प्रदर्शन बाधाओं का कारण बन रहे हैं।

रिएक्ट DevTools ब्राउज़र एक्सटेंशन रिएक्ट कॉम्पोनेन्ट, स्टेट और प्रॉप्स का निरीक्षण करने के लिए उपकरण प्रदान करता है।

व्यावहारिक उदाहरण और सर्वोत्तम प्रथाएँ

उदाहरण: एक फंक्शनल कॉम्पोनेन्ट को मेमोइज़ करना

एक साधारण फंक्शनल कॉम्पोनेन्ट पर विचार करें जो उपयोगकर्ता का नाम प्रदर्शित करता है:

function UserProfile({ user }) {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
}

इस कॉम्पोनेन्ट को अनावश्यक रूप से फिर से रेंडर होने से रोकने के लिए, आप React.memo() का उपयोग कर सकते हैं:

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
});

अब, UserProfile केवल तभी फिर से रेंडर होगा जब user प्रॉप बदलेगा।

उदाहरण: useCallback() का उपयोग करना

एक ऐसे कॉम्पोनेन्ट पर विचार करें जो एक चाइल्ड कॉम्पोनेन्ट को एक कॉलबैक फ़ंक्शन पास करता है:

import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

इस उदाहरण में, handleClick फ़ंक्शन ParentComponent के प्रत्येक रेंडर पर फिर से बनाया जाता है। इसके कारण ChildComponent अनावश्यक रूप से फिर से रेंडर होता है, भले ही उसके प्रॉप्स नहीं बदले हों।

इसे रोकने के लिए, आप handleClick फ़ंक्शन को मेमोइज़ करने के लिए useCallback() का उपयोग कर सकते हैं:

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Only re-create the function if the count changes

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

अब, handleClick फ़ंक्शन केवल तभी फिर से बनाया जाएगा जब count स्टेट बदलेगी।

उदाहरण: useMemo() का उपयोग करना

एक ऐसे कॉम्पोनेन्ट पर विचार करें जो अपने प्रॉप्स के आधार पर एक व्युत्पन्न मान की गणना करता है:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

इस उदाहरण में, filteredItems ऐरे MyComponent के प्रत्येक रेंडर पर फिर से गणना की जाती है, भले ही items प्रॉप नहीं बदला हो। यदि items ऐरे बड़ा है तो यह अक्षम हो सकता है।

इसे रोकने के लिए, आप filteredItems ऐरे को मेमोइज़ करने के लिए useMemo() का उपयोग कर सकते हैं:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // Only re-calculate if the items or filter changes

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

अब, filteredItems ऐरे केवल तभी फिर से गणना की जाएगी जब items प्रॉप या filter स्टेट बदलेगी।

निष्कर्ष

रिएक्ट की रेंडरिंग प्रक्रिया और कॉम्पोनेन्ट लाइफसाइकल को समझना प्रदर्शनकारी और रखरखाव योग्य एप्लिकेशन बनाने के लिए आवश्यक है। मेमोइज़ेशन, कोड-स्प्लिटिंग, और लिस्ट वर्चुअलाइजेशन जैसी तकनीकों का लाभ उठाकर, डेवलपर्स रेंडरिंग प्रदर्शन को अनुकूलित कर सकते हैं और एक सहज और प्रतिक्रियाशील उपयोगकर्ता अनुभव बना सकते हैं। हुक्स की शुरुआत के साथ, फंक्शनल कॉम्पोनेन्ट में स्टेट और साइड इफेक्ट्स का प्रबंधन अधिक सीधा हो गया है, जिससे रिएक्ट डेवलपमेंट की लचीलापन और शक्ति और बढ़ गई है। चाहे आप एक छोटा वेब एप्लिकेशन बना रहे हों या एक बड़ा एंटरप्राइज सिस्टम, रिएक्ट की रेंडरिंग अवधारणाओं में महारत हासिल करना उच्च-गुणवत्ता वाले यूजर इंटरफेस बनाने की आपकी क्षमता में काफी सुधार करेगा।

अतिरिक्त संसाधन

• रेंडरिंग एलिमेंट्स पर रिएक्ट डॉक्यूमेंटेशन
• स्टेट और लाइफसाइकल पर रिएक्ट डॉक्यूमेंटेशन
• हुक्स पर रिएक्ट डॉक्यूमेंटेशन
• परफॉर्मेंस ऑप्टिमाइज़ करने पर रिएक्ट डॉक्यूमेंटेशन